<template>
  <div class="home">
    <CommonHeader :title="title"></CommonHeader>
    <MemberCard :user="user"></MemberCard>
    <HomeNotice :notices="notices"></HomeNotice>
    <HomeCard :menus="menus"></HomeCard>
    <HomeBottom></HomeBottom>
    <van-loading />
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader'
import MemberCard from './components/MemberCard'
import HomeNotice from './components/Notice'
import HomeCard from './components/Card'
import HomeBottom from './components/Bottom'
import { get } from '@/utils/request.js'
import { ref } from 'vue'

const useHomeEffect = () => {
  const title = '青春慈溪'
  const user = ref({})
  const notices = ref([])
  const menus = ref([])
  const getHomeData = async () => {
    const result = await get('/api/v1/index')
    console.log(result)
    if (result?.code === 0 && result.data) {
      const res = result.data
      user.value = res.user
      notices.value = res.notices
      menus.value = res.menus
    }
  }
  return { title, user, notices, menus, getHomeData }
}

export default {
  name: 'Home',
  components: {
    CommonHeader,
    MemberCard,
    HomeNotice,
    HomeCard,
    HomeBottom
  },
  setup () {
    const { title, user, notices, menus, getHomeData } = useHomeEffect()
    getHomeData()
    return { title, user, notices, menus }
  }
}
</script>

<style  lang="scss" scoped>
.home{
background-color: #f6f7f8;
}
</style>
